<template>
  <view class="guide-container">
    <swiper class="guide-swiper" @change="handleChange">
      <swiper-item v-for="(item, index) in guides" :key="index">
        <image :src="item.image" mode="aspectFill" class="guide-image"/>
        <view class="guide-text">{{item.text}}</view>
      </swiper-item>
    </swiper>
    
    <view class="dots">
      <view 
        v-for="(item, index) in guides" 
        :key="index"
        :class="['dot', currentIndex === index ? 'active' : '']"
      />
    </view>
    
    <view class="start-btn" v-if="currentIndex === guides.length - 1" @tap="handleStart">
      开始体验
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      guides: [
        {
          image: '/static/guide-1.png',
          text: '每天都会绽放新的花朵'
        },
        {
          image: '/static/guide-2.png',
          text: '移动花朵装扮你的树'
        },
        {
          image: '/static/guide-3.png',
          text: '记录生活的每一天'
        }
      ]
    }
  },
  
  onLoad() {
    // 检查是否从封面页来
    const isFirstTime = !uni.getStorageSync('hasVisited')
    if (!isFirstTime) {
      // 不是首次进入，直接跳转到主页
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }
  },
  
  methods: {
    handleChange(e) {
      this.currentIndex = e.detail.current
    },
    
    handleStart() {
      // 设置访问标记
      uni.setStorageSync('hasVisited', true)
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
.guide-container {
  height: 100vh;
  position: relative;
  
  .guide-swiper {
    height: 100%;
  }
  
  .guide-image {
    width: 100%;
    height: 100%;
  }
  
  .guide-text {
    position: absolute;
    bottom: 200rpx;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
  }
  
  .dots {
    position: absolute;
    bottom: 100rpx;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    
    .dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      margin: 0 10rpx;
      
      &.active {
        background: #fff;
      }
    }
  }
  
  .start-btn {
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 20rpx 60rpx;
    background: rgba(255,255,255,0.2);
    border-radius: 100rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style> 